227890 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

とある日常

とある日常

背景をグラデーションする 1

■ 背景をタテにグラデーションする


前回は、テーブルのデザイン変更術を学びました。
今回は、背景をヨコにグラデーションして遊んでみます。


背景をヨコにグラデーションする
filter: alpha(opacity=数値,finishopacity=数値,style=数値);



入力ソースはこちら。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td>
</td></tr>
</table>


これをベースに下で細かく説明していきます


まずは、「opacity=100」の部分。
これは、背景自体の透明度を設定します。
（数字が小さいほど、背景が透明になります）

「opacity=50」に変えてみます。



入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=50,finishopacity=30,style=1);">
<tr><td>
</td></tr>
</table>



つぎに「finishopacity=30」の部分。
グラデーションの度合いを設定します。
（数字が小さいほど、グラデーションの割合が大きくなります）

「finishopacity=70」に変えてみましょう。



入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=70,style=1);">
<tr><td>
</td></tr>
</table>



「finishopacity=10」のとき。



入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=10,style=1);">
<tr><td>
</td></tr>
</table>



つぎに「style=1」の部分。
グラデーションのパターンを設定します。
（style=1かstyle=2）

「style=1」のとき。



入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td>
</td></tr>
</table>


「style=2」のとき。



入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=2);">
<tr><td>
</td></tr>
</table>



今まで学んできたことは
「td」タグにも設定することができます。



入力ソース。
<table width="190" height="80" style="border:1px solid #0066ff;">
<tr><td width="100%" height="30%" style="background-color:#ccffff;
filter:alpha(opacity=100,finishopacity=30,style=1);">
</td></tr><tr><td width="100%" height="70%">
</td></tr>
</table>

© Rakuten Group, Inc.